<template>
  <div
    :id="id"
    :style="{top:top+'px', right:right+'px'}"
    class="some-question"
    @click="clickQA"
    @mousedown="move"
  >
    <slot/>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      default: null,
      required: true
    },
    top: {
      type: Number,
      default: 0
    },
    right: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
    }
  },
  methods: {
    clickQA() {
      this.$emit('whoClick', this.$route.name)
    },
    move() {
      const oBox = document.getElementById(this.id)
      let disX = 0
      let disY = 0
      // 获取浏览器可见区域宽高，div宽高
      const browserWidth = document.documentElement.clientWidth
      const browserHeight = document.documentElement.clientHeight
      const boxWidth = oBox.offsetWidth
      const boxHeight = oBox.offsetHeight
      // 容器鼠标按下事件
      oBox.onmousedown = function (event) {
        const e = event || window.event
        // 鼠标相对于div左侧位置
        disX = e.clientX - this.offsetLeft
        disY = e.clientY - this.offsetTop
        document.onmousemove = function (event) {
          const e = event || window.event
          oBox.style.left = (e.clientX - disX) + 'px'
          if ((e.clientX - disX) <= 0) {
            oBox.style.left = 0
          } else if ((boxWidth - disX + e.clientX) >= browserWidth) {
            oBox.style.left = browserWidth - boxWidth + 'px'
          }
          oBox.style.top = (e.clientY - disY) + 'px'
          if ((e.clientY - disY) <= 0) {
            oBox.style.top = 0
          } else if ((boxHeight - disY + e.clientY) >= browserHeight) {
            oBox.style.top = browserHeight - boxHeight + 'px'
          }
        }

        document.onmouseup = function () {
          document.onmousemove = null
          document.onmouseup = null
          document.onmousedown = null
        }
        return false
      }
    }
  }
}
</script>

<style lang="scss">
.some-question {
  position: fixed; /*定位*/
  // top: 400px;
  // right: 10px;
  z-index: 2001;
  cursor: move;
}
</style>
